/* eslint-disable @typescript-eslint/no-var-requires */
import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import { getMyProcessModel } from '@/services/approval';
import { useSelector } from 'react-redux';
import { applyType } from '@/constants/index';
const IMAGE = require('@/assets/images/nav-children-apply.png');
import history from '@/utils/history';

const DocCreateTemplate: React.FC<any> = () => {
  const [list, setList] = useState([]);
  const { common } = useSelector((state: any) => ({
    common: state.common,
  }));

  useEffect(() => {
    requestData();
  }, []);

  const requestData = async () => {
    const res = await getMyProcessModel();
    setList(res.data);
  };

  const handleJump2Detail = (item: any) => {
    history.push({
      pathname: '/apply',
      query: {
        applyId: item.id || item.applyId,
        applyType: item.procTypeCode,
        innerProcDefId: item.innerProcDefId,
        title: (userName || '') + '的' + item.procModelName,
        orgId: item.orgId,
      },
    });
  };

  const userName = common.userInfo?.userName;

  return (
    <div className={styles.wrap}>
      <div className={styles.scrollContent}>
        {list.map((item: any, index) => {
          let list = item.list || [];
          return (
            <div key={index}>
              <div className={styles.itemTitle}>{item.title}</div>
              <div className={styles.itemList}>
                {list.map((item: any) => {
                  return (
                    <a
                      className={styles.card}
                      key={item.innerProcDefId || index}
                      onClick={() => handleJump2Detail(item)}
                    >
                      <img
                        className={styles.icon}
                        src={item.iconUrl || IMAGE}
                      />
                      <div className={styles.content}>
                        <span className={styles.contentTitle}>
                          {item.procModelName}
                        </span>
                        <span className={styles.contentDesc}>
                          {item.procRemark}
                        </span>
                      </div>
                    </a>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default DocCreateTemplate;
